//旧的 直接引进抄袭别的包 export * from "touchable-hook";

/** 可点按的区域Div; 手机电脑都支持。
 * The state machine used here is based on the one provided
 * in react-native-web:
 *
 * https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Touchable/index.js
 */

import * as React from "react";
import {isHoverEnabled} from "customize-easy-ui-component/esm/Hooks/hover-enabled";
// import { isHoverEnabled } from "./hover-enabled";



/**
 * useTouchable
 *
 * useTouchable is a hook that attempt to emulate native touch behaviour for things
 * like list items, buttons, etc.
 *
 * const { bind, active } = useTouchable({
 *   onPress: () => console.log('hello'),
 *   disabled: false,
 * })
 */


export type OnPressFunction = (
    e?: React.TouchEvent | React.MouseEvent | React.KeyboardEvent | Event
) => void;

export interface TouchableOptions {
    behavior?: "button" | "link";
    disabled?: boolean;
    onPress?: OnPressFunction;
}
//HOOK返回类型:
export interface TouchableResult {
    //手机上没有
    hover: boolean;
    bind: {
        onKeyDown: (e: React.KeyboardEvent) => void;
        onKeyUp: (e: React.KeyboardEvent) => void;
        // ref: React.MutableRefObject<any>;
        onMouseEnter: (e: React.TouchEvent | React.MouseEvent | React.KeyboardEvent | Event) => void;
        onMouseLeave: (e: React.TouchEvent | React.MouseEvent | React.KeyboardEvent | Event) => void;
        //直接上
        onClick?: ((e: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
    };
    //改版后已无效
    active: boolean
}

/**表示某一个小div区域可以按下点击 触发函数。 返回bind? 同一个名字onXXX()可能冲突;
 * 点按 不是拖拽拉动的，相对位置是静止的，按住时间长短？才算，立刻反馈被您点到了。
 * Hook：原版乃是touchable-hook这个包的。
 * @param options
 * 本函数返回的类型声明的近20个参数对象实际是自动生成的代码，非人工编辑的。
 * 这里ListItem MenuItem IconButton Button 这四个都直接用到useTouchable的 点按触发。
 * 【淘汰中】？ 关键# 这个用了"react-gesture-responder"
 * #计划"react-gesture-responder"删除！！： #把 ListItem MenuItem Button这几个用useTouchable全都改掉？ 或useTouchable直接改？
 * @消除依赖 react-gesture-responder 参考https://use-gesture.netlify.app/docs/examples/
 * ?考虑添加 ：上级组件轮播台context正在被拉动的可能允许取消当前的 onClick onPress触发。?代码关联性太强了。牵涉范围太广泛，得不偿失！。
 */
export function usePressable({
                                 onPress,
                                 behavior="button",
                                 disabled=false,
                             }: TouchableOptions ) : TouchableResult
{
    //绑定到Div；暂时没用
    // const ref = React.useRef<HTMLAnchorElement | HTMLDivElement | any>(null);
    //这两个完全不是一个含义， hover是鼠标点位置进 出来。     #当前有显示内容了。
    const [hover, setHover] = React.useState(false);
    //active表示被触摸选中了。简化后 就【没用到】
    const [active, setActive] = React.useState(false);


    /** 加个条件 active==true 才能真的 emitPress;?
     * 直接依赖于状态机切换的： active和emitPress是平行身份，onPress不直接取决于active。
     * Emit a press event if not disabled
     * @param e
     */
    function emitPress(e: React.TouchEvent | React.MouseEvent | React.KeyboardEvent | Event
    ) {
        if (!disabled && onPress) {
            //缺少历史状态管理： 拉拽时刻： 意味着取消当前的Item的 onClick??  PointerEvent offsetX
            onPress(e);
        }
    }

    /** 鼠标模式:
     * If our mouse leaves we terminate our responder,
     * even if our press remains down. This emulates
     * native mouse behaviour.
     * @param e
     */
    function onMouseLeave(e: React.TouchEvent | React.MouseEvent | React.KeyboardEvent | Event) {
        if (hover) {
            setHover(false);
        }
    }

    function onMouseEnter(e: React.TouchEvent | React.MouseEvent | React.KeyboardEvent | Event) {
        if (!hover) {
            setHover(true);
        }
    }

    //外部参数disabled导致的
    React.useEffect(() => {

    }, [disabled]);

    /** 键盘模式 直接就能触发！
     * 空格键  回车键。  Keyboard support ,必须是foucsed?
     *   onEnterDown -> onPress
     *   onSpaceUp -> onPress
     * Prevent default.
     * link: Don't prevent default
     */
    function onKey(e: React.KeyboardEvent) {
        if (e.type === "keyup" && e.key === " ") {
            emitPress(e);
        }
        else if (e.type === "keyup" && e.key === "Enter") {
            emitPress(e);
        }
        else {
            return;
        }
        //停止冒泡，就不会传递给上级组件Div了
        e.stopPropagation();

        if (!(e.key === "Enter" && behavior === "link")) {
            //阻止缺省行为
            e.preventDefault();
        }
    }

    /* 上级的轮播台无法触发 PointerUp事件了？
      "framer-motion"需要在主体窗口加上 pointer-events: none; 手机才能顺利拉得动listItem区域，这时该区域按钮也无效了。
    * */

    return {
        bind: {
            onMouseEnter,
            onMouseLeave,
            onKeyUp: onKey,
            onKeyDown: onKey,
            // ref,
            onClick: emitPress,
        },
        active: !disabled && active,
        hover: !disabled && isHoverEnabled() && hover
    };
}
